<template>
  <div class="main">
    <Form :model="subjectInfo"
          :label-width="80">
      <FormItem label="标题">
        <Input v-model="subjectInfo.title"
               placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem label="教材版本">
        <Select style="width:200px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
        <Select style="width:200px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
        <Select style="width:200px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
      </FormItem>
      <FormItem label="章节">

        <Cascader :data="data"
                  style="width:300px"
                  v-model="value1"></Cascader>

      </FormItem>
      <FormItem label="题型">
        <RadioGroup v-model="subjectInfo.type">
          <Radio :label="SUBJECT_TYPE.DANXUAN">单选题</Radio>
          <Radio :label="SUBJECT_TYPE.DUOXUAN">多选题</Radio>
          <Radio :label="SUBJECT_TYPE.PANDUAN">判断题</Radio>
          <Radio :label="SUBJECT_TYPE.JIANDA">简答题</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="选项"
                v-show="checkIsXZT(subjectInfo.type)">
        <div class="flex"
             style="padding:10px"
             v-for="(item,i) in subjectInfo.options">
          <div style="padding:0 10px">{{i|fmtOrder2ABC}}.</div>
          <Input v-model="item.val" :key="item.id"></Input><Button v-show="subjectInfo.options.length>2"
                  @click="removeOption(i)"
                  style="margin:0 10px"
                  type="error"
                  shape="circle"
                  icon="md-close"></Button>
        </div>

        <Button v-show="subjectInfo.options.length<10"
                type="success"
                @click="addOption">新增选项</Button>

      </FormItem>
      <FormItem label="解析">
        <Input v-model="subjectInfo.desc"
               type="textarea"
               placeholder="Enter"></Input>
      </FormItem>
      <FormItem label="答案">
        <div v-if="subjectInfo.type===SUBJECT_TYPE.DANXUAN">
          <RadioGroup>
            <Radio :label="i" v-for="(item,i) in subjectInfo.options">{{i | fmtOrder2ABC}}</Radio>
          </RadioGroup>
        </div>
        <div v-if="subjectInfo.type===SUBJECT_TYPE.DUOXUAN">
          <CheckboxGroup>
            <Checkbox :label="i" v-for="(item,i) in subjectInfo.options">{{i | fmtOrder2ABC}}</Checkbox>
          </CheckboxGroup>
        </div>
        <div v-if="subjectInfo.type===SUBJECT_TYPE.PANDUAN">
         <RadioGroup>
            <Radio label="T">正确</Radio>
            <Radio label="F">错误</Radio>
          </RadioGroup>
        </div>

        
        <Input v-model="subjectInfo.answer"
               type="textarea"
               placeholder="Enter"></Input>
      </FormItem>

      <FormItem>
        <Button type="primary">保存题目</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      data: [
        {
          value: "beijing",
          label: "北京",
          children: [
            {
              value: "gugong",
              label: "故宫"
            },
            {
              value: "tiantan",
              label: "天坛"
            },
            {
              value: "wangfujing",
              label: "王府井"
            }
          ]
        },
        {
          value: "jiangsu",
          label: "江苏",
          children: [
            {
              value: "nanjing",
              label: "南京",
              children: [
                {
                  value: "fuzimiao",
                  label: "夫子庙"
                }
              ]
            },
            {
              value: "suzhou",
              label: "苏州",
              children: [
                {
                  value: "zhuozhengyuan",
                  label: "拙政园"
                },
                {
                  value: "shizilin",
                  label: "狮子林"
                }
              ]
            }
          ]
        }
      ],
      subjectInfo: {
        title: "",
        type: -1,
        options: Array.from({
          length: 4
        }).map((r, i) => ({
          id: +new Date() + i,
          val: ""
        })),
        answer: "",
        desc: ""
      }
    };
  },
  methods: {
    addOption() {
      this.subjectInfo.options.push({
        id: +new Date(),
        //   id:this.subjectInfo.options.length+1,
        val: ""
      });
    },
    removeOption(i) {
      this.subjectInfo.options.splice(i, 1);
    }
  },
  created() {
    this.subjectInfo.type = this.SUBJECT_TYPE.DUOXUAN;
  }
};
</script>
<style lang="scss" scope>
.main {
  width: 800px;
  height: 600px;
  margin: 70px auto;
}
.flex {
  display: flex;
}
</style>